<template>
  <div class="content">
    <Spin size="large" fix v-if="loading"> </Spin>
    <div class="demo-tabs-style1">
      <Tabs type="card" @on-click="clickTabs" v-model="cardName">
        <Button
          @click="
            resetData(false);
            selectbydishApi();
          "
          size="small"
          slot="extra"
          >重置筛选</Button
        >
        <TabPane label="全部" name="-1">
          <div>
            <!-- <div>
              <span class="typeName">价格</span>
              <CheckboxGroup v-model="form.tuletype" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in tuletypeList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div> -->
            <div>
              <span class="typeName">食材类型</span>
              <CheckboxGroup v-model="form.foodClass" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in foodClassList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">菜肴类型</span>
              <CheckboxGroup v-model="form.tuletype" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in tuletypeList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">烹饪类型</span>
              <CheckboxGroup v-model="form.kind" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in kindList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">烹饪味道</span>
              <CheckboxGroup v-model="form.flavour" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in flavourList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
          </div>
        </TabPane>
        <TabPane label="大锅菜" name="0">
          <div>
            <div>
              <span class="typeName">食材类型</span>
              <CheckboxGroup v-model="form.foodClass" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in foodClassList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">菜肴类型</span>
              <CheckboxGroup v-model="form.tuletype" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in tuletypeList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">烹饪类型</span>
              <CheckboxGroup v-model="form.kind" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in kindList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">烹饪味道</span>
              <CheckboxGroup v-model="form.flavour" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in flavourList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
          </div>
        </TabPane>
        <TabPane label="主食" name="1">
          <div>
            <div>
              <span class="typeName">菜肴类型</span>
              <CheckboxGroup v-model="form.tuletype" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in tuletypeList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
            <div>
              <span class="typeName">烹饪类型</span>
              <CheckboxGroup v-model="form.kind" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.value"
                  v-for="(item, index) in kindList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
          </div>
        </TabPane>
        <TabPane label="小菜" name="2">
          <div>
            <div>
              <span class="typeName">菜肴类型</span>
              <CheckboxGroup v-model="form.tuletype" style="margin: 10px 0 15px">
                <Checkbox
                  :label="item.dishCategory"
                  v-for="(item, index) in tuletypeList"
                  :key="index"
                ></Checkbox>
              </CheckboxGroup>
            </div>
          </div>
        </TabPane>
        <TabPane label="其他" name="3"> </TabPane>
      </Tabs>
    </div>
    <div class="content-bottom" id="itemBox">
      <div class="content-bottom-item">
        <div class="btnBox">
          <div class="btnBox-left">
            <div style="display: flex">
              <Input
                v-trim
                v-model="leftFoodName"
                placeholder="输入菜肴名称搜索"
                clearable
                class="mr_10"
              />
              <cusButton type="primary" @onClick="selectbydishApi(cardName)"
                >查询</cusButton
              >
            </div>
            <div style="font-size: 14px; margin-left: 10px">
              当前菜肴：{{ data.length }} 个
            </div>
          </div>
          <!-- <div>
              <Poptip
                confirm
                title="是否确认添加此类下的所有菜肴？"
                width="230"
                @on-ok="addAll()"
              >
                <cusButton type="default">添加所有</cusButton>
              </Poptip>
            </div> -->
        </div>
        <div
          class="dishesBox"
          style="overflow: hidden; overflow-y: auto"
          :style="{ height: `${itemHeight[cardNum] - 100}px` }"
        >
          <Tag
            type="border"
            color="primary"
            v-for="(item, index) in data"
            :key="index"
            style="margin-right: 10px; margin-bottom: 10px; cursor: pointer"
          >
            <div>{{ item.dishName }}</div>
          </Tag>
        </div>
        <!-- <div style="height: 30px; line-height: 30px">*鼠标左键添加菜肴</div> -->
      </div>
    </div>
    <!-- 营养标签 -->
    <dishesTags ref="dishesTags"></dishesTags>
  </div>
</template>
<script>
import {
  selectdishtypeattribute,
  selectbydish,
  selectcheckaiconfigdish,
  deleteCheckAiConfigDish,
  saveaiconfigdish,
} from "@/api/business/dishesModule";
import { mapMutations } from "vuex";
import dishesTags from "./components/dishesTags";

export default {
  components: { dishesTags },
  data() {
    return {
      cardName: "0",
      cardNum: 0,
      loading: false,
      foodClassList: [], // 食材类型
      tuletypeList: [], // 菜肴类型
      kindList: [], // 烹饪类型
      flavourList: [], // 烹饪味道
      dishminuteList: [], // 烹饪时间
      colourList: [], // 颜色
      form: {
        foodClass: [],
        tuletype: [],
        kind: [],
        flavour: [],
        dishminute: [],
        colour: [],
      },
      leftFoodName: "",
      rightName: "",
      data: [],
      rightData: [],
      itemHeight: [0, 0, 0],
      showRigth: false,
      weeksArr: ["one", "two", "three", "four", "five", "six", "seven"],
      mealTimesArr: ["早餐", "午餐", "晚餐"],
    };
  },
  mounted() {
    this.selectdishtypeattributeApi();
    this.selectcheckaiconfigdishApi();
  },
  filters: {
    weekName(week) {
      let name = "";
      if (week == "one") {
        name = "星期一";
      }
      if (week == "two") {
        name = "星期二";
      }
      if (week == "three") {
        name = "星期三";
      }
      if (week == "four") {
        name = "星期四";
      }
      if (week == "five") {
        name = "星期五";
      }
      if (week == "six") {
        name = "星期六";
      }
      if (week == "seven") {
        name = "星期天";
      }
      return name;
    },
  },
  methods: {
    ...mapMutations(["setTagNavList"]),
    // 获取属性列表
    selectdishtypeattributeApi(type = 0) {
      this.resetData();
      return new Promise((resolve) => {
        this.loading = true;
        this.showRigth = false;
        selectdishtypeattribute({
          type: type,
        }).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.selectbydishApi(type);
            if (type == -1) {
              this.foodClassList = res.data.foodClass;
              this.tuletypeList = res.data.tuletype;
              this.kindList = res.data.kind;
              this.flavourList = res.data.flavour;
            }
            if (type == 0) {
              this.foodClassList = res.data.foodClass;
              this.tuletypeList = res.data.tuletype;
              this.kindList = res.data.kind;
              this.flavourList = res.data.flavour;
            }
            if (type == 1) {
              this.tuletypeList = res.data.tuletype;
              this.kindList = res.data.kind;
            }
            if (type == 2) {
              this.tuletypeList = res.data.tuletype;
            }

            this.$nextTick(() => {
              this.cardNum = parseInt(type);
              if (!this.itemHeight[this.cardNum]) {
                this.itemHeight[this.cardNum] = document.getElementById(
                  "itemBox"
                ).offsetHeight;
              }
              this.showRigth = true;
              console.log(this.itemHeight);
            });
            resolve();
          }
        });
      });
    },
    // 获取右侧数据
    selectcheckaiconfigdishApi(type = 0) {
      // this.resetData();
      return new Promise((resolve) => {
        selectcheckaiconfigdish({
          dishName: this.rightName,
        }).then((res) => {
          if (res.retCode == 2000) {
            this.rightData = res.data;
            resolve();
          }
        });
      });
    },
    // 获取左侧数据
    selectbydishApi(type = 0) {
      return new Promise((resolve) => {
        this.loading = true;
        let flavourArr = [];
        this.form.flavour.forEach((item) => {
          this.flavourList.forEach((it) => {
            if (it.value == item) {
              flavourArr.push(it);
            }
          });
        });
        let kindArr = [];
        this.form.kind.forEach((item) => {
          this.kindList.forEach((it) => {
            if (it.value == item) {
              kindArr.push(it);
            }
          });
        });
        let tuletypeArr = [];
        this.form.tuletype.forEach((item) => {
          this.tuletypeList.forEach((it) => {
            if (it.value == item) {
              tuletypeArr.push(it);
            }
          });
        });
        let foodClassArr = [];
        this.form.foodClass.forEach((item) => {
          this.foodClassList.forEach((it) => {
            if (it.value == item) {
              foodClassArr.push(it);
            }
          });
        });
        selectbydish({
          type: type,
          screenStatus: 1,
          dishName: this.leftFoodName,
          flavour: type == 0 || type == -1 ? flavourArr : null,
          kind: type == 0 || type == 1 || type == -1 ? kindArr : null,
          tuletype: tuletypeArr,
          foodClass: type == 0 || type == -1 ? foodClassArr : null,
        }).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.data = res.data;
            resolve();
          }
        });
      });
    },
    // 重置
    resetData(all = true) {
      if (all) {
        this.foodClassList = [];
        this.tuletypeList = [];
        this.kindList = [];
        this.flavourList = [];
        this.dishminuteList = [];
        this.colourList = [];
      }
      this.form = {
        foodClass: [],
        tuletype: [],
        kind: [],
        flavour: [],
        dishminute: [],
        colour: [],
      };
      this.leftFoodName = "";
    },
    // 点击表单
    clickTabs(name) {
      this.selectdishtypeattributeApi(name);
    },
    addDishes(item) {
      this.saveaiconfigdishApi([item]);
    },
    aiCreat() {
      this.rightData.forEach((item, index) => {
        let aIdx = Math.floor(Math.random() * 7);
        let bIdx = Math.floor(Math.random() * 3);
        this.$set(this.rightData[index], "week", this.weeksArr[aIdx]);
        this.$set(this.rightData[index], "mealTimes", this.mealTimesArr[bIdx]);
      });
    },
    saveBtn() {
      this.loading = true;
      return new Promise((resolve) => {
        saveOrderDishs(this.rightData).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success("点菜数据保存成功.");
            setTimeout(() => {
              let list = localStorage.getItem("tagNaveList")
                ? JSON.parse(localStorage.getItem("tagNaveList"))
                : [];
              list.forEach((item, index) => {
                if (item.name == "点菜") {
                  list.splice(index, 1);
                }
              });
              this.setTagNavList(list);
              this.$router.push({
                path: `/view/createCookbook/orderDishesList`,
              });
            }, 1000);
            resolve();
          }
        });
      });
    },
    // 添加全部
    addAll() {
      this.saveaiconfigdishApi(this.data);
    },
    // 清除全部
    deleteAll() {
      this.deleteCheckAiConfigDishApi(this.rightData);
    },
    // 删除单个
    deleteItem(item) {
      console.log(item);
      this.deleteCheckAiConfigDishApi([item]);
    },
    // 删除API
    deleteCheckAiConfigDishApi(arr) {
      return new Promise((resolve) => {
        this.loading = true;
        deleteCheckAiConfigDish(arr).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success("删除成功.");
            this.selectdishtypeattributeApi(this.cardName);
            this.selectcheckaiconfigdishApi();
            resolve();
          }
        });
      });
    },
    // 保存API
    saveaiconfigdishApi(arr) {
      return new Promise((resolve) => {
        this.loading = true;
        saveaiconfigdish(arr).then((res) => {
          this.loading = false;
          if (res.retCode == 2000) {
            this.$Message.success("添加成功.");
            this.selectdishtypeattributeApi(this.cardName);
            this.selectcheckaiconfigdishApi();
            resolve();
          }
        });
      });
    },
    // 营养标签
    onDetail() {
      this.$refs["dishesTags"].show();
    },
  },
};
</script>
<style>
.demo-tabs-style1 {
  box-shadow: 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
}
.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content {
  margin-top: -16px;
}

.demo-tabs-style1 > .ivu-tabs-card > .ivu-tabs-content > .ivu-tabs-tabpane {
  background: #fff;
  padding: 20px;
  
}
</style>
<style lang="less" scoped>
/*里面的代码可以根据自己需求去进行更改*/
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 2px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.4);
}
.content {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  &-bottom {
    background-color: #ffffff;
    border-radius: 6px;
    flex: 1;
    margin-top: 20px;
    box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
    display: flex;
    justify-content: space-between;
    &-item {
      flex: 1;
      background: #ffffff;
      height: calc(100% - 20px);
      padding: 20px 20px 0 20px;
      border-radius: 6px;
      // box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
      // overflow: auto;
    }
  }
  // background: #FFFFFF;
}

.typeName {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 20px;
}

.btnBox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  &-left {
    display: flex;
    align-items: center;
  }
  &-right {
    display: flex;
    align-items: center;
  }
}

.dishesBox {
  border: 1px solid #d7dde4;
  border-radius: 6px;
  padding: 10px;
}

.table {
  width: 100%;
  display: flex;
  border: 1px solid #d7dde4;
  height: 40px;
  background: #f8f8f9;
  font-weight: bold;
  &-item {
    flex: 1;
    border-right: 1px solid #d7dde4;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  &-itemTitle {
    font-size: 14px;
    font-weight: bold;
  }
}
.noBr {
  border-right: none !important;
}
</style>
